<template>
  <div class="bod">
    <div class="bod-top">
		<div class="bod-left">
			<div>
				<img class="fengxian" src="../../../assets/img/fengxian.png" />
			</div>
			<div>
				<img style="width: 110px;height: 22px;" src="../../../assets/img/tit1.png" />
			</div>
		</div>
		<div class="bod-right">
			<div class="swiper-button-prev" slot="button-prev">
				<img class="jiantou" src="../../../assets/img/jiantou2.png" />
			</div>
			<div class="text">{{imgIndex}}/4</div>
			<div class="swiper-button-next" slot="button-next">
				<img class="jiantou" src="../../../assets/img/jiantou.png" />
			</div>
		</div>
	</div>
	<div class="recommendPage">
	    <swiper :options="swiperOption" ref="mySwiper">
	      <swiper-slide v-for="(item,index) in 4" :key="index">
			  <slot v-if="item == 1" name="yuantable"></slot>
			  <slot v-if="item == 2" name="shengyu"></slot>
			  <slot v-if="item == 3" name="shengyu2"></slot>
			  <slot v-if="item == 4" name="tiao"></slot>
		  </swiper-slide>
	      <div class="swiper-pagination" slot="pagination"></div>
	    </swiper>
	</div>
  </div>
</template>

<script>
export default {
    props: {
        
    },
    data() {	
		const that = this;
        return {
			imgIndex:1,
			swiperOption: {
				// loop: true,
				/* autoplay: {
				  delay: 3000,
				  stopOnLastSlide: false,
				  disableOnInteraction: false
				}, */
				// 显示分页
				/* pagination: {
				  el: ".swiper-pagination",
				  clickable: true //允许分页点击跳转
				}, */
				// 设置点击箭头
				navigation: {
				  nextEl: ".swiper-button-next",
				  prevEl: ".swiper-button-prev"
				},
				on: {
					slideChangeTransitionStart: function() {
						that.imgIndex = this.realIndex + 1;  //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才实现了下标索引）
						console.log(that.imgIndex);
					}
				}
			}
		}
	},
	computed: {
		swiper() {
			console.log(this.$refs.mySwiper.swiper);
		  return this.$refs.mySwiper.swiper;
		}
	},
	mounted() {
		// current swiper instance
		// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
		console.log("this is current swiper instance object", this.swiper);
		// this.swiper.slideTo(3, 1000, false);
	},
    methods: {
        pre(){
			
		},
		next(){
			console.log(123);
			
		}
    }
}
</script>
<style scoped lang="scss">
	.bod{
		// width: 422px;
		height: 492px;
		background-color: #091344;
		border: 1px solid #222855;
		box-sizing: border-box;
	}
	
	.bod-top{
		display: flex;
		height: 46px;
		background-image: linear-gradient(to right, rgba(24,104,167,0.2), rgba(69,121,196,0));
		align-items: center;
		justify-content: space-between;
	}
	
	.bod-top .bod-left{
		display: flex;
		align-items: center;
	}
	
	.bod-top .bod-left div:nth-child(1){
		width: 17px;
		height: 18px;
		margin-left: 22px;
		margin-right: 8px;
	}
	
	.bod-top .bod-left div:nth-child(2){
		font-size: 16px;
		line-height: 16px;
		color: #57E0EC;
		margin-right: 22px;
	}
	
	.bod-top .bod-right{
		display: flex;
		margin-right: 22px;
		align-items: center;
		
		.text{
			font-size: 14px;
			margin: 0 13px;
			color: #FFFFFF;
		}
	}
	
	.bod-top .bod-right .yuan{
		width: 24px;
		height: 24px;
		border-radius: 25px;
		background-color: #222855;
		position: relative;
	}
	
	.bod-top .fengxian{
		width: 100%;
		height: 100%;
	}
	
	.jiantou{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.swiper-button-prev{
		background-image: none;
		left: 0;
		margin-top: 0;
		width: 24px;
		height: 24px;
		border-radius: 25px;
		background-color: #222855;
		position: relative;
	}
	
	.swiper-button-next{
		background-image: none;
		right: 0;
		margin-top: 0;
		width: 24px;
		height: 24px;
		border-radius: 25px;
		background-color: #222855;
		position: relative;
	}
	
	
	.recommendPage .swiper-container{
	    position: relative;
	    width: 100%;
	    height: 445px;
	  }
	  .recommendPage .swiper-container .swiper-slide{
	    width: 100%;
	  }
</style>
